<!--  -->
<template>
  <div class="box">
    <a-select
      v-model="form.typeOptionsId"
      style="width: 200px; flex-shrink: 0"
      @change="handleChangeType"
      placeholder="请选择"
      :disabled="disabled"
    >
      <a-select-option v-for="option in sysOptions" :value="option.id" :key="option.id"
        >{{ option.optionsName }}
      </a-select-option>
    </a-select>
    <a-cascader
      v-if="form.typeOptionsId === 1"
      class="options"
      :fieldNames="{ label: 'module', value: 'id', children: 'children' }"
      :value="(form.optionsId || '').split('/').map(m => Number(m))"
      :options="level2SysOptions"
      @change="handleCascaderChange"
      placeholder="请选择"
      :disabled="disabled"
    />

    <a-select
      v-else-if="form.typeOptionsId === 2 || form.typeOptionsId === 3 || form.typeOptionsId === 5"
      class="options"
      show-search
      :value="form.optionsId ? Number(form.optionsId) : undefined"
      :default-active-first-option="false"
      :show-arrow="false"
      :filter-option="false"
      :not-found-content="null"
      @search="handleSearchOps"
      @change="handleChangeOps"
      placeholder="请输入标题搜索"
      :disabled="disabled"
    >
      <a-select-option v-for="option in level2SysOptions" :value="option.id" :key="option.id"
        >{{ option.title || option.name }}
      </a-select-option>
    </a-select>

    <template v-else-if="form.typeOptionsId === 6 || form.typeOptionsId === 7 || form.typeOptionsId === 11">
      <EditableCell
        :text="form.linkUrl"
        :placeholder="
          { 6: '请输入小程序路径', 7: '请输入配置的业务域名，例：https://xxx.com', 11: '请输入站内链接地址' }[
            form.typeOptionsId
          ]
        "
        :width="[6, 7, 11].includes(form.typeOptionsId) && 'auto'"
        :editStyle="{ marginTop: '5px' }"
        @change="onLinkChange($event)"
      />
    </template>

    <template v-else-if="form.typeOptionsId === 10 || form.typeOptionsId === 12">
      <!-- <a-button class="_ml-10" type="primary" @click="handleSave">保存</a-button> -->
    </template>

    <a-select
      v-else-if="form.typeOptionsId !== 8 && form.typeOptionsId !== 9"
      class="options"
      :value="form.optionsId ? Number(form.optionsId) : ''"
      @change="handleChangeLink"
      :disabled="disabled"
    >
      <a-select-option v-for="option in linkList" :value="option.id" :key="option.id"
        >{{ option.name }}
      </a-select-option>
    </a-select>

    <EditableCell
      v-if="form.typeOptionsId === 6"
      :text="form.appId"
      :editStyle="{ marginTop: '5px' }"
      placeholder="请输入小程序appid"
      @change="onAppIdChange($event)"
    />
  </div>
</template>

<script>
import { getSysOptions, getSysOptionsById, systemLinkList } from '@/api/web/web'
import { consultGetList } from '@/api/content/management'
import { activityList } from '@/api/activity/activity'
import { photoAlbum } from '@/api/content/operate'
import EditableCell from '@/components/EditableCell'

export default {
  props: ['selectType', 'typeOptionsId', 'terminalType', 'optionsId', 'optionsName', 'linkUrl', 'appId', 'disabled'],
  components: {
    EditableCell
  },
  data() {
    return {
      sysOptions: [],
      level2SysOptions: [],
      // newLevel2SysOptions: [],
      form: {
        typeOptionsId: undefined,
        typeOptionsName: undefined,
        optionsId: undefined,
        optionsName: undefined,
        linkUrl: undefined,
        appId: undefined
      },
      linkList: []
    }
  },
  computed: {},
  watch: {
    typeOptionsId(val) {
      this.form.typeOptionsId = val
    },
    optionsId(val) {
      this.form.optionsId = val
    },
    linkUrl(val) {
      console.log('val---->', val)
      this.form.linkUrl = val
    },
    appId(val) {
      this.form.appId = val
    },
    async 'form.typeOptionsId'(val) {
      this.form.typeOptionsName = (this.sysOptions.find(f => f.id === val) || {}).optionsName
      this.level2SysOptions = []
      if (val === 1) {
        let res = await getSysOptionsById(val)
        this.level2SysOptions = res.data || []
      } else if ((val === 2 || val === 3 || val === 5) && this.form.optionsId) {
        // this.form.optionsId = undefined
        this.level2SysOptions = [{ id: Number(this.optionsId), title: this.optionsName }]
      } else if (val === 4) {
        this.getSystemLinkList()
      }
    }
  },
  methods: {
    //获取分类列表
    async get_sys_options() {
      let res = await getSysOptions({ type: this.selectType })
      this.sysOptions = res.data || []
    },
    //获取系统链接
    async getSystemLinkList() {
      let res = await systemLinkList({ type: this.terminalType || 1 })
      this.linkList = res.data || []
    },
    async handleChangeType(val) {
      this.form.optionsId = undefined
      this.form.linkUrl = undefined
      this.form.appId = undefined
      //活动列表、相册列表
      if (val === 8 || val === 9 || val === 12 || val === 10) {
        this.$emit('setSelectData', this.form)
      }
    },
    async handleSearchOps(value) {
      console.log('handleSearchOps----->', value)
      if (this.form.typeOptionsId === 2) {
        let res = await consultGetList({
          current: 1,
          size: 10,
          title: value
        })
        this.level2SysOptions = res.data.records
      } else if (this.form.typeOptionsId === 3) {
        let res = await activityList({
          current: 1,
          pageSize: 10,
          title: value
        })
        this.level2SysOptions = res.data.records
      } else if (this.form.typeOptionsId === 5) {
        let res = await photoAlbum({
          current: 1,
          pageSize: 100,
          keyWord: value
        })
        this.level2SysOptions = res.data.records
      }
    },
    handleChangeOps(value) {
      this.form.optionsId = value
      let item = this.level2SysOptions.find(f => f.id === value)
      this.form.optionsName = item.title || item.name
      this.$emit('setSelectData', this.form)
    },
    handleChangeLink(value) {
      this.form.optionsId = value
      this.form.linkUrl = this.linkList.find(f => f.id === value).linkUrl
      this.$emit('setSelectData', this.form)
    },
    handleCascaderChange(val, option) {
      this.form.optionsId = val.join('/')
      this.form.optionsName = option[option.length - 1].module
      console.log('this.form------>', this.form)
      this.$emit('setSelectData', this.form)
    },
    onLinkChange(linkUrl) {
      this.form.linkUrl = linkUrl
      this.$emit('setSelectData', this.form)
    },
    onAppIdChange(appId) {
      this.form.appId = appId
      this.$emit('setSelectData', this.form)
    },
    handleSave() {
      this.$emit('setSelectData', this.form)
    }
  },
  created() {
    this.form.typeOptionsId = this.typeOptionsId
    this.form.optionsId = this.optionsId
    this.form.linkUrl = this.linkUrl
    this.form.appId = this.appId
    this.get_sys_options()
  },
  mounted() {}
}
</script>
<style>
.box {
  display: flex;
  align-items: center;
}

.options {
  width: 200px !important;
  flex-shrink: 0;
  margin-left: 10px;
}
</style>
